<template>
	<view class="page-container">
		<!-- 顶部信息卡片 -->
		<view class="header-card">
			<view class="header-info">
				<view class="position-badge" v-if="report.positionName">
					<text class="badge-icon">💼</text>
					<text>{{ report.positionName }}</text>
				</view>
				<view class="date-info" v-if="report.generateTime">
					<text class="date-icon">📅</text>
					<text>{{ report.generateTime }}</text>
				</view>
			</view>
		</view>
		
		<!-- 综合评分卡片 -->
		<view class="score-card">
			<view class="score-content">
				<view class="score-left">
					<view class="score-label">综合评分</view>
					<view class="score-display">
						<text class="score-number" :style="{ color: getScoreColor(report.overallScore || report.overall_score) }">
							{{ report.overallScore || report.overall_score || 0 }}
						</text>
						<text class="score-unit">分</text>
					</view>
					<view class="score-level" :style="{ color: getScoreColor(report.overallScore || report.overall_score) }">
						{{ getScoreLevel(report.overallScore || report.overall_score) }}
					</view>
				</view>
				<view class="score-right">
					<view class="score-circle" :style="{ 
						background: `conic-gradient(${getScoreColor(report.overallScore || report.overall_score)} ${(report.overallScore || report.overall_score || 0) * 3.6}deg, #f0f3f8 0deg)` 
					}">
						<view class="circle-inner"></view>
					</view>
				</view>
			</view>
			<view class="score-bar">
				<view class="score-bar-fill" 
					:style="{ 
						width: (report.overallScore || report.overall_score || 0) + '%',
						backgroundColor: getScoreColor(report.overallScore || report.overall_score)
					}">
					<view class="bar-shine"></view>
				</view>
			</view>
		</view>
		
		<!-- 总体评价 -->
		<view class="info-card">
			<view class="card-header">
				<view class="card-icon">💬</view>
				<view class="card-title">总体评价</view>
			</view>
			<view class="card-content">
				<text class="content-text">{{ report.overallEvaluation || report.overall_evaluation || '暂无评价' }}</text>
			</view>
		</view>
		
	<!-- 维度评分 -->
	<view class="info-card dimension-card" v-if="dimensionScores && dimensionScores.length > 0">
		<view class="card-header">
			<view class="card-icon">📊</view>
			<view class="card-title">维度评分</view>
		</view>
		<view class="card-content">
			<view class="dimension-item" v-for="(d, idx) in dimensionScores" :key="idx">
				<view class="dimension-header">
					<view class="dimension-info">
						<text class="dimension-name">{{ d.dimensionName || getDimensionName(d.dimensionId || d.dimension_id) }}</text>
						<text class="dimension-weight" v-if="d.dimensionWeight">
							<text class="weight-icon">⚖️</text>
							<text>{{ (d.dimensionWeight * 100).toFixed(0) }}%</text>
						</text>
					</view>
					<view class="dimension-score-badge" :style="{ backgroundColor: getScoreColor(d.score) }">
						<text>{{ d.score }}</text>
					</view>
				</view>
				<view class="dimension-bar">
					<view class="dimension-bar-fill" 
						:style="{ 
							width: d.score + '%',
							backgroundColor: getScoreColor(d.score)
						}">
						<view class="bar-shine"></view>
					</view>
				</view>
				<view class="dimension-evaluation" v-if="d.evaluation">
					<text>{{ d.evaluation }}</text>
				</view>
			</view>
		</view>
	</view>
		
		<!-- 优势 -->
		<view class="info-card highlight-card success-card" v-if="report.strengths && report.strengths !== '无可用信息'">
			<view class="card-header">
				<view class="card-icon">✨</view>
				<view class="card-title">优势亮点</view>
			</view>
			<view class="card-content">
				<text class="content-text highlight-text">{{ report.strengths }}</text>
			</view>
		</view>
		
		<!-- 不足 -->
		<view class="info-card highlight-card warning-card" v-if="report.weaknesses && report.weaknesses !== '未回答问题，缺乏技术展示和沟通意愿'">
			<view class="card-header">
				<view class="card-icon">⚠️</view>
				<view class="card-title">需要改进</view>
			</view>
			<view class="card-content">
				<text class="content-text highlight-text">{{ report.weaknesses }}</text>
			</view>
		</view>
		
		<!-- 改进建议 -->
		<view class="info-card highlight-card info-card-bg">
			<view class="card-header">
				<view class="card-icon">💡</view>
				<view class="card-title">改进建议</view>
			</view>
			<view class="card-content">
				<text class="content-text highlight-text">{{ report.suggestions || '暂无建议' }}</text>
			</view>
		</view>
		
		<!-- 底部操作按钮 -->
		<view class="action-buttons">
			<button class="action-btn secondary-btn" @click="goBack">返回列表</button>
		</view>
	</view>
</template>

<script>
import { getReportDetail } from '@/api/interview/report.js'
export default {
	data(){
		return {
			report: {
				overall_score: 0,
				overall_evaluation: '',
				dimension_scores: [],
				strengths: '',
				weaknesses: '',
				suggestions: '',
				overallScore: 0,
				overallEvaluation: '',
				generateTime: ''
			}
		}
	},
	computed: {
		// 维度评分列表（兼容两种字段名）
		dimensionScores() {
			return this.report.dimension_scores || this.report.dimensionScores || [];
		}
	},
	methods: {
		// 根据分数获取颜色
		getScoreColor(score) {
			if(!score || score === 0) return '#95a5a6';
			if(score >= 80) return '#27ae60';
			if(score >= 60) return '#f39c12';
			return '#e74c3c';
		},
		
		// 根据分数获取等级
		getScoreLevel(score) {
			if(!score || score === 0) return '未评分';
			if(score >= 90) return '优秀';
			if(score >= 80) return '良好';
			if(score >= 60) return '及格';
			return '需要提升';
		},
		
		// 获取维度名称
		getDimensionName(dimensionId) {
			const dimensionMap = {
				1: '技术能力',
				2: '编码实践',
				3: '问题解决',
				4: '沟通表达',
				5: '学习能力'
			};
			return dimensionMap[dimensionId] || `维度${dimensionId}`;
		},
		
		// 返回列表
		goBack() {
			uni.navigateBack();
		},
		
		// 分享报告
		shareReport() {
			uni.showToast({
				title: '分享功能开发中',
				icon: 'none'
			});
		}
	},
	onLoad(params){
        // 1) 支持通过ID加载详情
        if(params && params.id){
            uni.showLoading({title: '加载中...'});
            getReportDetail(params.id).then(res =>{
                uni.hideLoading();
                if(res && res.data){
                    this.report = res.data;
                }
            }).catch(err => {
                uni.hideLoading();
                uni.showToast({
                    title: '加载失败',
                    icon: 'none'
                });
            });
            return;
        }
        // 2) 兼容传参或本地缓存
        let reportJson = params && params.report ? decodeURIComponent(params.report) : uni.getStorageSync('lastInterviewReport');
        try{ 
            if(reportJson){ 
                this.report = JSON.parse(reportJson); 
                console.log('报告加载成功:', this.report);
            } 
        }catch(e){ 
            console.error('报告解析失败', e); 
            uni.showToast({
                title: '数据解析失败',
                icon: 'none'
            });
        }
	}
}
</script>

<style lang="scss" scoped>
.page-container {
	min-height: 100vh;
	background: linear-gradient(180deg, #f8f9ff 0%, #f5f7fa 100%);
	padding: 30rpx;
	padding-bottom: 140rpx;
}

// 顶部信息卡片
.header-card {
	background-color: #fff;
	border-radius: 24rpx;
	padding: 25rpx 30rpx;
	margin-bottom: 25rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.header-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15rpx;
}

.position-badge {
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 12rpx 20rpx;
	border-radius: 20rpx;
	font-size: 26rpx;
	font-weight: 600;
	background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);
	color: #fff;
	box-shadow: 0 4rpx 12rpx rgba(30, 136, 229, 0.35);
	
	.badge-icon {
		font-size: 32rpx;
		line-height: 1;
	}
}

.date-info {
	display: flex;
	align-items: center;
	gap: 8rpx;
	font-size: 24rpx;
	color: #95a5a6;
	padding: 8rpx 16rpx;
	background-color: #f8f9ff;
	border-radius: 16rpx;
	
	.date-icon {
		font-size: 28rpx;
		line-height: 1;
	}
}

// 综合评分卡片
.score-card {
	background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);
	border-radius: 24rpx;
	padding: 40rpx 35rpx;
	margin-bottom: 25rpx;
	box-shadow: 0 12rpx 40rpx rgba(30, 136, 229, 0.4);
	position: relative;
	overflow: hidden;
	
	&::before {
		content: '';
		position: absolute;
		top: -50%;
		right: -50%;
		width: 400rpx;
		height: 400rpx;
		background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
	}
}

.score-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
	position: relative;
	z-index: 1;
}

.score-left {
	flex: 1;
}

.score-label {
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 15rpx;
	letter-spacing: 2rpx;
}

.score-display {
	display: flex;
	align-items: baseline;
	margin-bottom: 15rpx;
	
	.score-number {
		font-size: 100rpx;
		font-weight: bold;
		color: #fff;
		line-height: 1;
		text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
	}
	
	.score-unit {
		font-size: 32rpx;
		color: rgba(255, 255, 255, 0.95);
		margin-left: 8rpx;
	}
}

.score-level {
	font-size: 28rpx;
	font-weight: 600;
	color: #fff;
	padding: 8rpx 16rpx;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 16rpx;
	display: inline-block;
}

.score-right {
	margin-left: 30rpx;
}

.score-circle {
	width: 140rpx;
	height: 140rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transform: rotate(-90deg);
	
	.circle-inner {
		width: 100rpx;
		height: 100rpx;
		background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);
		border-radius: 50%;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
	}
}

.score-bar {
	height: 16rpx;
	background-color: rgba(255, 255, 255, 0.25);
	border-radius: 8rpx;
	overflow: hidden;
	position: relative;
	z-index: 1;
	box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	
	.score-bar-fill {
		height: 100%;
		border-radius: 8rpx;
		background-color: #fff;
		transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		box-shadow: 0 2rpx 8rpx rgba(255, 255, 255, 0.5);
	}
	
	.bar-shine {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 50%;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 100%);
		border-radius: 8rpx 8rpx 0 0;
	}
}

// 信息卡片
.info-card {
	background-color: #fff;
	border-radius: 24rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
	transition: all 0.3s ease;
	border: 2rpx solid transparent;
	
	&:active {
		transform: translateY(-2rpx);
		box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.08);
	}
}

.card-header {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
	padding-bottom: 18rpx;
	border-bottom: 2rpx solid #f0f3f8;
	
	.card-icon {
		font-size: 40rpx;
		margin-right: 12rpx;
		line-height: 1;
	}
	
	.card-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #2c3e50;
		letter-spacing: 1rpx;
	}
}

.card-content {
	.content-text {
		font-size: 28rpx;
		line-height: 1.8;
		color: #5a6c7d;
		word-break: break-all;
	}
}

// 高亮卡片变体
.highlight-card {
	border-left: 5rpx solid #1e88e5;
	position: relative;
	
	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 5rpx;
		background: inherit;
		filter: blur(8rpx);
		opacity: 0.6;
	}
	
	.content-text {
		font-weight: 500;
	}
}

.success-card {
	border-left-color: #27ae60;
	background: linear-gradient(to right, rgba(39, 174, 96, 0.08) 0%, #fff 60%);
	
	.card-icon {
		filter: drop-shadow(0 2rpx 8rpx rgba(39, 174, 96, 0.3));
	}
	
	.highlight-text {
		color: #27ae60;
	}
}

.warning-card {
	border-left-color: #e74c3c;
	background: linear-gradient(to right, rgba(231, 76, 60, 0.08) 0%, #fff 60%);
	
	.card-icon {
		filter: drop-shadow(0 2rpx 8rpx rgba(231, 76, 60, 0.3));
	}
	
	.highlight-text {
		color: #e74c3c;
	}
}

.info-card-bg {
	border-left-color: #3498db;
	background: linear-gradient(to right, rgba(52, 152, 219, 0.08) 0%, #fff 60%);
	
	.card-icon {
		filter: drop-shadow(0 2rpx 8rpx rgba(52, 152, 219, 0.3));
	}
	
	.highlight-text {
		color: #2c3e50;
	}
}

// 维度评分
.dimension-card {
	.card-content {
		display: flex;
		flex-direction: column;
		gap: 25rpx;
	}
}

.dimension-item {
	padding: 25rpx;
	background-color: #f8f9ff;
	border-radius: 16rpx;
	border: 2rpx solid #f0f3f8;
	transition: all 0.3s ease;
	
	&:hover {
		background-color: #f0f3f8;
		border-color: #e0e6f0;
	}
}

.dimension-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15rpx;
}

.dimension-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.dimension-name {
	font-size: 28rpx;
	font-weight: 600;
	color: #2c3e50;
}

.dimension-weight {
	font-size: 22rpx;
	color: #1e88e5;
	display: flex;
	align-items: center;
	gap: 6rpx;
	
	.weight-icon {
		font-size: 24rpx;
		line-height: 1;
	}
}

.dimension-score-badge {
	min-width: 80rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12rpx;
	font-size: 32rpx;
	font-weight: bold;
	color: #fff;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.dimension-bar {
	height: 20rpx;
	background-color: #e0e6f0;
	border-radius: 10rpx;
	overflow: hidden;
	margin-bottom: 15rpx;
	box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
	position: relative;
}

.dimension-bar-fill {
	height: 100%;
	border-radius: 10rpx;
	transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
	
	.bar-shine {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 50%;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 100%);
		border-radius: 10rpx 10rpx 0 0;
	}
}

.dimension-evaluation {
	font-size: 26rpx;
	line-height: 1.7;
	color: #5a6c7d;
	padding: 15rpx;
	background-color: #fff;
	border-radius: 12rpx;
	border: 2rpx solid #e0e6f0;
}

// 底部操作按钮
.action-buttons {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	gap: 20rpx;
	padding: 20rpx 30rpx;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, #fff 100%);
	backdrop-filter: blur(20rpx);
	box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
	border-top: 2rpx solid #f0f3f8;
}

.action-btn {
	flex: 1;
	height: 88rpx;
	border-radius: 44rpx;
	font-size: 30rpx;
	font-weight: bold;
	border: none;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	
	&.primary-btn {
		background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);
		color: #fff;
		box-shadow: 0 4rpx 16rpx rgba(30, 136, 229, 0.4);
		
		&:active {
			transform: scale(0.97);
			box-shadow: 0 2rpx 8rpx rgba(30, 136, 229, 0.3);
		}
	}
	
	&.secondary-btn {
		background-color: #e3f2fd;
		color: #1e88e5;
		border: 2rpx solid #bbdefb;
		box-shadow: none;
		
		&:active {
			background-color: #e0e6f0;
			transform: scale(0.97);
		}
	}
}
</style>


